<template>
  <!-- 头部查询区域 -->
  <el-header class="el-header">
    <div class="right-panel">
      <div class="right-panel-search">
        <div class="mt-4">
            <el-input
              v-model="queryInfo.query"
              placeholder="查询内容"
              class="input-with-select"
			  clearable
			  @clear="getAllData"
            >
              <template #prepend>
                <el-select
                  v-model="selectField"
                  placeholder="查询类型"
                  style="width: 115px"
                >
                  <el-option label="姓名" value="姓名" />
                  <el-option label="性别" value="性别" />
                  <el-option label="体检编号" value="体检编号" />
                  <el-option label="体检年度" value="体检年度" />
                  <el-option label="家庭住址" value="家庭住址" />
                  <el-option label="联系电话" value="联系电话" />
                </el-select>
              </template>
              <template #append>
                <el-button
                  type="primary"
                  plain
                  icon="el-icon-search"
				  @click="searchPeople"
                ></el-button>
              </template>
            </el-input>
          </div>
      </div>
    </div>
  </el-header>

  <!-- 两个按钮 -->
  <div class="btnModel">
    <div class="left-panel">
    </div>
    <Button :columns="state.columns"></Button>
  </div>
  <!-- 数据表单 -->
  <el-table
    ref="tableRef"
    :data="state.nowAllList"
    stripe
    :header-cell-style="{ color: '#666', 'text-align': 'center' }"
    :cell-style="{ 'text-align': 'center' }"
    :fit="true"
    style="width: 100%; font-size: 14px"
    ooltip-effect="dark"
    @selection-change="handleSelectionChange"
    class="mainTable"
  >
    <el-table-column prop="examineId" label="体检编号" width="120px" v-if="state.columns[0].show" sortable="true" />
    <el-table-column
      label="体检年度"
      prop="year"
      v-if="state.columns[1].show"
      width="100px"
    />
    <el-table-column
      label="姓名"
      prop="name"
      v-if="state.columns[2].show"
      width="100px"
    />
    <el-table-column
      label="性别"
      prop="sex"
      v-if="state.columns[3].show"
    />
    <el-table-column
      label="家庭住址"
      prop="familyDetail"
      v-if="state.columns[4].show"
    />
    <el-table-column
      label="体检日期"
      prop="examineTime"
      v-if="state.columns[5].show"
    />
    <el-table-column
      label="身份证"
      prop="idCard"
      v-if="state.columns[6].show"
    />
	<el-table-column
      label="联系电话"
      prop="phone"
      v-if="state.columns[7].show"
    />
	<el-table-column
      label="状态"
      prop="healthExaminStats"
      v-if="state.columns[8].show"
    />
    <el-table-column fixed="right" label="操作" width="120">
      <template v-slot="scope">
        <el-button
          type="text"
          size="small"
          @click="showDetail(scope.row, 'show')"
          >详情</el-button
        >
		 <el-popconfirm
          confirm-button-text="审核通过"
          cancel-button-text="审核不通过"
          icon-color="#626AEF"
          title="是否通过审核?"
          @confirm="confirmEvent"
          @cancel="cancelEvent"
        >
          <template #reference>
            <el-button @click="judgeBtn(scope.row)" type="text" size="small"  style="color: orange"
              >审核</el-button
            >
          </template>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页区开始 -->
  <div class="page">
    <el-pagination
      v-model:currentPage="queryInfo.pagenum"
      v-model:page-size="queryInfo.pagesize"
      :page-sizes="[10, 20, 25, 30]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="queryInfo.total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>

  <!-- 分页区结束 -->

  <!-- 详情页对话框 -->
  <!-- <el-dialog v-model="isShowDetail" title="体检合格详情" width="50%">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="姓名">
        <el-input
          :disabled="isEdit"
          v-model="detailData.name"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="性别">
        <el-input
          :disabled="true"
          v-model="detailData.sex"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="身份证号">
        <el-input
          :disabled="isEdit"
          v-model="detailData.idCard"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="民族">
        <el-input
          :disabled="isEdit"
          v-model="detailData.nation"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="户籍类型">
        <el-input
          :disabled="isEdit"
          v-model="detailData.householdType"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="学校名称">
        <el-input
          :disabled="isEdit"
          v-model="detailData.schoolName"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="学历">
        <el-input
          :disabled="isEdit"
          v-model="detailData.cultureProgram"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="学业情况">
        <el-input
          :disabled="isEdit"
          v-model="detailData.professionSistuation"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="专业名称">
        <el-input
          :disabled="isEdit"
          v-model="detailData.professionTitle"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="专业代码">
        <el-input
          :disabled="isEdit"
          v-model="detailData.professionCode"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="应征地">
        <el-input
          :disabled="isEdit"
          v-model="detailData.bingyiPlace"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="家庭住址">
        <el-input
          :disabled="isEdit"
          v-model="detailData.familyDetail"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="联系方式">
        <el-input
          :disabled="isEdit"
          v-model="detailData.phone"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="身高体重视力"
        ><el-input
          :disabled="isEdit"
          v-model="detailData.bodyData"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="学历审核">
        <el-input
          :disabled="isEdit"
          v-model="detailData.educationReview"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="是否预征">
        <el-input
          :disabled="isEdit"
          v-model="detailData.isOrderSoldiers"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="登记报名时间">
        <el-input
          :disabled="isEdit"
          v-model="detailData.registTime"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
      <el-descriptions-item label="网登编号">
        <el-input
          :disabled="isEdit"
          v-model="detailData.loginId"
          :placeholder="!isEdit ? '请输入' : '暂无数据'"
        />
      </el-descriptions-item>
    </el-descriptions>
    <template #footer>
      <span class="dialog-footer">
		  <el-button v-show="!isEdit" type="warning" @click="isShowDetail = false"
          >取消</el-button
        >
        <el-button v-show="!isEdit" type="primary" @click="handleEidt"
          >确认</el-button
        >
      </span>
    </template>
  </el-dialog> -->
</template>


<script setup>
import {
  getData,
  searchData,
  judgeCityApi
} from "@/api/physicalExamination/cityCheck";
import Button from "@/components/commom/Button";
import { reactive, ref, onMounted, watch} from "vue";
import { ElMessage } from "element-plus";
// let isShowDetail = ref(false);
// let detailData = reactive({});
let multipleSelection = ref([]);
let selectField = ref('')

// 接收审核的数据
const judgeState = reactive({
  examineId: "",
  cityAuditReason: "",
  cityAuditResult: "",
});


// const isEdit = ref(false);
// const showDetail = function (Ddata, type) {
//   if (type === "show") {
//     isEdit.value = true;
//   } else {
//     isEdit.value = false;
//   }

//   detailData = Object.assign(detailData, Ddata);
//   isShowDetail.value = true;
//   console.log(detailData);
//   console.log(this);
//   console.log(bodyData);
// };
// const handleEidt=async function(){
// 	isShowDetail.value = false;
// 	updatadata.url = updatadata.url + `?poliinfoid=${detailData.poliInfoId}`
// 	updatadata.body = {
// 		...detailData
// 	}
// 	console.log(updatadata.url);
// 	console.log(updatadata.body);
// 	const updataRes =await updatadata.put()
// 	console.log(updataRes);
// 	 getAllData();
// }

// 多选框选中获取该信息
const handleSelectionChange = function (val) {
  multipleSelection.value = [];
  console.log(val);
  val.forEach((item) => {
    multipleSelection.value.push(item.poliInfoId);
  });

  console.log(multipleSelection);
};

// 获取数据，渲染表格
const getAllData = async function () {
  const allData = await getData.get();
  console.log(allData);
  state.allList = allData.data;
  queryInfo.total = allData.data.length;
  loadALL = allData.data;
  console.log(loadALL);
  console.log("312321321321312312");
  //   restaurants.value = loadAll();
  getPageData();
};

// 实现分页效果
const getPageData = function () {
  let start = (queryInfo.pagenum - 1) * queryInfo.pagesize;
  let end = start + queryInfo.pagesize;
  state.nowAllList = state.allList.slice(start, end);
};

// 分页存储改变大小触发该事件
const handleSizeChange = function (newSize) {
  queryInfo.pagesize = newSize;
  getAllData();
};

// 分页发生变化触发该事件
const handleCurrentChange = function (newPage) {
  queryInfo.pagenum = newPage;
  getAllData();
};


// 根据姓名查找功能
const searchPeople = async function () {
  if (!queryInfo.query) {
    getAllData();
    return;
  }
  const search = await searchData.post(`?name=${queryInfo.query}`);
  if (queryInfo.query) {
    console.log(search);
    console.log(search.data);
    state.nowAllList = search.data;
    ElMessage({
      message: search.msg,
      type: "success",
    });
  }

  if (!search.data) {
    ElMessage({
      message: search.msg,
      type: "error",
    });
  }
};
// const isShow = ref(false);
const state = reactive({
  columns: [
    { name: "体检编号", show: true, prop: "examineId"},
    { name: "体检年度", show: true, prop: "year" },
    { name: "姓名", show: true, prop: "name" },
    { name: "性别", show: true, prop: "sex" },
    { name: "家庭住址", show: true, prop: "familyDetail", },
    { name: "体检日期", show: true, prop: "examineTime" },
    { name: "身份证号", show: true, prop: "idCard" },
    { name: "联系电话", show: true, prop: "phone" },
    { name: "状态", show: true, prop: "healthExaminStats" },
  ],
  // 全部的数据
  allList: [],
  // 页面显示的数据
  nowAllList: [],
});
// 获取用户列表的参数对象
const queryInfo = reactive({
  query: "",
  //当前页数
  pagenum: 1,
  //当前每页显示多少条数据
  pagesize: 10,
  // 总数
  total: 0,
});
// 输入框下拉框数据
let loadALL = reactive({});

// 多选框选中数组长度
// const formLabelWidth = ref("px")
onMounted(() => {
  getAllData();
  console.log(state.allList.tall);
});
watch(queryInfo, (queryInfo) => {
  if (queryInfo.query === "") {
    searchPeople();
  }
});
// 审核按钮
const judgeBtn = function (val) {
  console.log(val);
  judgeState.examineId = val.examineId;
  console.log(judgeState);
};
// 审核通过
const confirmEvent = function () {
  judgeState.cityAuditResult = "1";
  judgeState.cityAuditReason = "该过还得过";
  console.log(judgeState);
  judgeResApi();
  setTimeout(()=>{
	getAllData()
   },100)
};
// 审核不通过
const cancelEvent = function () {
  judgeState.cityAuditResult = "0";
  judgeState.cityAuditReason = "你就算了吧";
  console.log(judgeState);
  judgeResApi();
   setTimeout(()=>{
	getAllData()
   },100)
};
// 调用审核的函数
const judgeResApi = async function () {
  judgeCityApi.body = {
    ...judgeState,
  };
  console.log(judgeCityApi.body);
  const judgeApiRes = await judgeCityApi.post();
  if (judgeApiRes.code) {
    ElMessage({
      message: judgeApiRes.msg,
      type: "success",
    });
  }
};
</script>

<style scoped>
.btnModel {
  display: flex;
  justify-content: space-between;
  margin-top: 5px;
  margin-left: 30px;
  /* margin-right: 5px; */
}
.left-panle {
  display: flex;
  align-items: center;
  width: 380px;
  justify-content: space-around;
}
.right-panle {
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: space-around;
  width: 720px;
}
.btn1 {
  margin-left: 20px;
}

.el-table {
  display: flex;
  justify-content: space-between;
  text-align: center;
  margin-top: 10px;
}
.allbtn {
  width: 1200px;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  margin-left: 5px;
}
.el-descriptions-item {
  margin-bottom: 1000px;
}
/* 分页条居中 */
.el-pagination {
  margin-top: 10px;
  align-items: center;
  justify-content: center;
}
.checkboxCss {
  display: flex;
  flex-direction: column;
}
.el-header {
	display: flex;
	justify-content: flex-end;
}
</style>
